<template>
  <div class="cart">
    <div class="content">
      <van-empty description="描述文字" v-if="cart.length <= 0" />

      <van-swipe-cell v-for="(item, index) in cart" :key="index" class="a">
        <!-- <div class="b"> -->
        <!-- <van-checkbox v-model="item.status" @click="check"></van-checkbox> -->
        <van-card
          :num="item.num"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$pre + item.img"
        >
          <!--单选  -->
          <template #tags>
            <div>
              <van-checkbox v-model="item.status" @click="check"></van-checkbox>
            </div>
          </template>
          <!--按钮  -->
          <template #num>
            <div>
              <van-button @click="item.num--" :disabled="item.num == 1"
                >-</van-button
              >
              <span>{{ item.num }}</span>
              <van-button @click="item.num++">+</van-button>
            </div>
          </template>
        </van-card>
        <!-- </div> -->

        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>

      <!-- //提交订单、 -->
      <van-submit-bar :price="js[0]" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: this.$utils.getuid(),
      cart: [],
      checked: true, //全选
    };
  },
  methods: {
    // 反选
    check(val) {
      this.checked = this.cart.every((item) => item.status);
    },
    // 全选
    all() {
      this.cart.forEach(
        (item) => (item.status = this.checked) //xhr.status:获取当前服务器的响应状态  200=>成功
      );
    },
    onSubmit() {
      let orders = [];
      this.cart.forEach((item) => {
        if (item.status) orders.push(item);
      });
      console.log(orders);
      if ((orders.length == 0)) {
        this.$notify({
          type: "warning",
          message: "请选择商品信息！",
        });
        return;
      }
      localStorage.setItem('orderlist',JSON.stringify({orders,...this.js}))
      this.$router.push('/order')
    },
    //删除
    // del(id){
    //     this.$api.cartDel(id).then(res=>{
    //       console.log(res);
    //     })
    // }
  },
  created() {},
  mounted() {
    this.$api.cartgoods({ uid: this.uid }).then((res) => {
      console.log(res);
      this.cart = res.data.list;
      console.log(this.cart);
    });
  },
  components: {},
  computed: {
    js() {
      let num = 0;
      let num1 = 0;
      this.cart.forEach((item) => {
        if (item.status) {
          num += parseFloat(item.num) * parseInt(item.price) * 100;
          num1 += parseFloat(item.num) * 100;
        }
      });
      return [num, num1];
    },
  },
  watch: {},
};
</script>

<style lang='less' scoped>
 
.b {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}
.cart {
  width: 100%;
  height: 100%;
}
.content {
  padding-top: 90px;
}
/deep/.van-submit-bar {
  position: fixed;
  bottom: 100px;
  left: 0;
  z-index: 100;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 1px solid #eee;
}
.car {
  align-items: center;
}
.delete-button {
  height: 100%;
}

.goods-card {
  width: 80%;
}
</style>
